<template>
    <section>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="Basic Info" name="first">
                <el-table
                        :data="basicData"
                        style="width: 100%">
                    <el-table-column
                            prop="region_name"
                            label="Region Name"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="start_key"
                            label="StartKey"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="end_key"
                            label="EndKey"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="replica_id"
                            label="ReplicaID">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="Request Metrics" name="second">
                <el-table
                        :data="requestData"
                        style="width: 100%">
                    <el-table-column
                            prop="region_name"
                            label="Region Name"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="readrequestcount"
                            label="ReadRequestCount"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="writerrequestcount"
                            label="WriteRequestCount">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="Storefiles Metrics" name="third">
                <el-table
                        :data="storefilesData"
                        style="width: 100%">
                    <el-table-column
                            prop="region_name"
                            label="Region Name"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="num_stores"
                            label="Num.stores"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="num_storefiles"
                            label="Num. storefiles"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="stroefile_size_uncompressed"
                            label="Stroefile Size Uncompressed"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="storefile_size"
                            label="Storefile Size"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="index_size"
                            label="Index Size"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="bloom_size"
                            label="Bloom Size"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="data_locality"
                            label="Data Locality">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="Memstore Metrics" name="fourth">
                <el-table
                        :data="memstoreData"
                        style="width: 100%">
                    <el-table-column
                            prop="region_name"
                            label="Region Name"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="memstore_size"
                            label="Memstore Size">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="Compaction Metrics" name="fives">
                <el-table
                        :data="compactionData"
                        style="width: 100%">
                    <el-table-column
                            prop="region_name"
                            label="Region Name"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="num_compactingkvs"
                            label="Num.compactingKVS"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="_compactedkvs"
                            label="Num.CompactedKVS"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="compaction_progress"
                            label="Compaction Progress">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </section>
</template>

<script>
  import dao from '../../common/dao'
  import util from '../../common/util'
  export default {
    props: ['model'],
    components: {},
    data() {
      return {
        activeName: 'first',
        basicData: [],
        requestData: [],
        storefilesData: [],
        memstoreData: [],
        compactionData: [],
      }
    },
    methods: {
      handleClick(){
      },
      getTabelData(){
        let table_name = this.model.table_name || '';
        let name_space = this.model.name_space || '';
        dao.descTable({table_name,name_space}).then(res => {
            if (!res.body || res.body.retCode != '200') {
             util.apiMsg(res);
             return false;
             }
          let region_info = res.body.region_info||{};
          this.basicData =region_info.basic_info;
          this.requestData = region_info.request_metrics;
          this.storefilesData = region_info.storefiles_metrics;
          this.memstoreData = region_info.memstore_metrics;
          this.compactionData = region_info.compaction_metrics;
        });
      },
    },
    mounted: function () {
      this.getTabelData();

    }
  }
</script>

<style scoped>

</style>